<template>
	<view class="container">
		<!-- 图表 -->
		<view class="wallettop">
			<view class="qiun-charts">
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing">
				</canvas>
			</view>
			<!-- <view class="qiun-bg-white charts-right">
				<view>
					<view class="qiun-rows legend-itme">
						<view class="legend-itme-point" :style="{'background-color':item.color}"></view>
						<view class="legend-itme-text">{{item.name}}:{{item.data}}人</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 钱包数据 -->
		<view class="walletbg wallettop">
			<view class="walletName">钱包数据</view>
			<!-- 余额 -->
			<view class="langr" @click="redirectToLink('/otherpages/member/balance/balance')">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/money.png')"></image>
					<text>{{ $lang('common.balance') }}</text>
				</view>
				<text class="data">{{moneyInfo.balance}}</text>
			</view>
			<!-- 红包 -->
			<view class="langr" @click="redirectToLink('/otherpages/member/balance_money/balance_money')">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/bonus.png')"></image>
					<text>红包</text>
				</view>
				<text class="data">{{moneyInfo.balance_money}}</text>
			</view>
			<!-- 	<view class="langr">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/bonus.png')"></image>
					<text>奖金</text>
				</view>
				<text class="data">￥{{1576.001}}</text>
			</view> -->
			<!-- 积分 -->
			<view class="langr" @click="redirectToLink('/otherpages/member/point/point')">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/integral.png')"></image>
					<text>{{ $lang('common.point') }}</text>
				</view>
				<text class="data">{{moneyInfo.point}}</text>
			</view>
			<!-- 红积分 -->
			<view class="langr" @click="redirectToLink('/otherpages/member/red_point/red_point')">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/redintegral.png')"></image>
					<text>{{ $lang('common.red_point') }}</text>
				</view>
				<text class="data">{{moneyInfo.red_point}}</text>
			</view>
			<!-- 君政劵 -->
			<view class="langr" @click="redirectToLink('/otherpages/member/junzheng_ticket_rate/junzheng_ticket_rate')">
				<view class="smelll">
					<image :src="$util.img('upload/uniapp/member/wallet/stamps.png')"></image>
					<text>{{ $lang('common.junzheng_ticket') }}</text>
				</view>
				<text class="data">{{moneyInfo.junzheng_ticket}}</text>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="walletbg">
			<text class="walletName">我的服务</text>

			<view class="list">
				<view class="item" @click="redirectToLink('/otherpages/recharge/list/list')">
					<view class="serviceitem">
						<image :src="$util.img('upload/uniapp/member/wallet/wallet1.png')"></image>
					</view>
					<text>充值</text>
				</view>
				<view class="item" @click="redirectToLink('/otherpages/transfer/transfer')">
					<view class="serviceitem">
						<image :src="$util.img('upload/uniapp/member/wallet/wallet2.png')"></image>
					</view>
					<text>转账</text>
				</view>
				<view class="item" @click="redirectToLink('/otherpages/member/account/account')">
					<view class="serviceitem">
						<image :src="$util.img('upload/uniapp/member/wallet/wallet3.png')"></image>
					</view>
					<text>银行卡</text>
				</view>
				<view class="item" @click="redirectToLink('/otherpages/member/apply_withdrawal/apply_withdrawal')">
					<view class="serviceitem">
						<image :src="$util.img('upload/uniapp/member/wallet/wallet4.png')"></image>
					</view>
					<text>提现</text>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';

	var _self;
	var canvaRing = null;
	export default {
		data() {
			return {
				// u-charts
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				moneyInfo: {
					point: '',
					integral: '',
					redintegral: '',
					stamps: '',
					balance_rate: '',
					point_rate: '',
					red_point_rate: '',
					junzheng_ticket_rate: '',
					balance: '',
					red_point: '',
					junzheng_ticket: '',
					balance_money:'',
				},
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$api.sendRequest({
					url: '/api/member/getWallet',
					data: {},
					success: res => {

						// 百分比 
						this.moneyInfo.balance_rate = parseFloat(res.data.balance_rate)
						this.moneyInfo.balance_money_rate = parseFloat(res.data.balance_money_rate)
						this.moneyInfo.point_rate = parseFloat(res.data.point_rate)
						this.moneyInfo.red_point_rate = parseFloat(res.data.red_point_rate)
						this.moneyInfo.junzheng_ticket_rate = parseFloat(res.data.junzheng_ticket_rate)
						// 数值
						this.moneyInfo.balance = parseInt(res.data.balance)
						this.moneyInfo.balance_money = parseInt(res.data.balance_money)
						this.moneyInfo.point = parseInt(res.data.point)
						this.moneyInfo.red_point = parseInt(res.data.red_point)
						this.moneyInfo.junzheng_ticket = parseInt(res.data.junzheng_ticket)
						let Ring = {
							series: [{
								"name": "余额",
								"data": this.moneyInfo.balance_rate
							},  {
								"name": "红包",
								"data": this.moneyInfo.balance_money_rate
							}, {
								"name": "积分",
								"data": this.moneyInfo.point_rate
							}, {
								"name": "红积分",
								"data": this.moneyInfo.red_point_rate
							}, {
								"name": "君政券",
								"data": this.moneyInfo.junzheng_ticket_rate
							}]
						};
						console.log(Ring.series)
						_self.showRing("canvasRing", Ring);
					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					legend: {
						show: true,
						position: 'right',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 20 * _self.pixelRatio,
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					// 是否动画展示
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 是否在图表中显示数据标签内容值
					dataLabel: true,

				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
			// 路径
			redirectToLink(url) {
				if (!uni.getStorageSync('token')) {
					this.$refs.login.open(url);
				} else {
					this.$util.redirectTo(url);
				}
			},
		},
		mounted() {
			console.log(this.moneyInfo)
		}
	}
</script>

<style lang="scss">
	.walletbg {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx;

		.langr {
			box-sizing: border-box;
			width: 100%;
			height: 130rpx;
			background: #FFFFFF;
			box-shadow: 0px 5px 30px 0px rgba(67, 133, 255, 0.08);
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.smelll {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 29rpx;
					background: #FFFFFF;
					box-shadow: 0px 5px 30px 0px rgba(67, 133, 255, 0.08);
				}

				text {
					font-size: 28rpx;
				}
			}

			.data {
				color: #E61C18;
			}


		}

		.list {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.serviceitem {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					margin-bottom: 21rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}

		.walletName {
			box-sizing: border-box;
			width: 100%;
			text-align: left;
			font-size: 30rpx;
			font-family: PingFang-SC-Bold;
			font-weight: bold;
			color: #303133;
			margin-bottom: 20rpx;
		}
	}

	.wallettop {
		margin-top: 10rpx;
	}

	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
